<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="companyName" label="公司名称" width="150">
        <template #default="scope">
          <el-input v-model="tableData[scope.$index].companyName" />
        </template>
      </el-table-column>
      <el-table-column prop="job" label="职位名称" width="120">
        <template #default="scope">
          <el-input v-model="tableData[scope.$index].job" />
        </template>
      </el-table-column>
      <el-table-column prop="courseRelated" label="是否与所学课程相关" width="180">
        <template #default="scope">
          <el-checkbox v-model="tableData[scope.$index].courseRelated" />
        </template>
      </el-table-column>
      <el-table-column prop="monthRange" label="时间段" width="300">
        <template #default="scope">
          <el-date-picker v-model="tableData[scope.$index].monthRange" type="monthrange" unlink-panels
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="40">
        <template #default="scope">
          <el-button link type="primary" :icon="Delete" @click.prevent="deleteRow(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="12">
        <el-button class="mt-4" style="width: 100%" @click="onAddItem">
          <el-icon>
            <CirclePlusFilled />
          </el-icon>&nbsp;Add Item
        </el-button>
      </el-col>
    </el-row>
    <el-button type="primary" @click="postWork">提交</el-button>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue';
import {
  CirclePlusFilled,
  Delete,
} from '@element-plus/icons-vue'

const tableData = reactive([{
  companyName: '',
  job: '',
  courseRelated: false,
  monthRange: [],
}])

const deleteRow = (index) => {
  tableData.splice(index, 1)
}

const onAddItem = () => {
  tableData.push({
    companyName: '',
    job: '',
    courseRelated: false,
    monthRange: [],
  })
}

const { proxy } = getCurrentInstance()
const baseURL = "http://localhost:8080/"
const postWork = function () {
  proxy.$axios.post(baseURL + '/work', tableData)
    .then(function (response) {
      const { data: res } = response
      console.log(res)
      console.log(tableData)
    });
}
/* defineExpose({
  tableData
}) */

</script>
<script>
export default {
  name: 'Work'
}
</script>

<style scoped>

</style>
